import { useState } from 'react'
import { Menu } from 'antd'
import { Outlet , useNavigate } from 'react-router-dom'
import {
  EditOutlined,
  HeartOutlined,
  TrophyOutlined,
  TagOutlined,
  // MenuUnfoldOutlined,
  // MenuFoldOutlined
} from '@ant-design/icons'
import "./index.less"



export default function Admin() {
  
  const [collapsed, setCollapsed] = useState<boolean>(false);

  const navigate = useNavigate()

  const menuItems = [
    {
      key: "article",
      label: "文章管理",
      icon: <EditOutlined />,
      onClick: () => navigate("/admin/article")
    },
    {
      key: "type",
      label: "类型管理",
      icon: <TagOutlined />,
      onClick: () => navigate("/admin/article-type")
    },
    {
      key: "favour",
      label: "爱好管理",
      icon: <HeartOutlined />,
      onClick: () => navigate("/admin/favour")
    },
    {
      key: "goal",
      label: "目标管理",
      icon: <TrophyOutlined />,
      onClick: () => navigate("/admin/goal")
    },
    // {
    //   key: "tag",
    //   label: "标签管理",
    //   icon: <TagOutlined />,
    //   onClick: () => navigate("/admin/tag")
    // },
    {
      key: "about",
      label: "介绍管理",
      icon: <TagOutlined /> ,
      onClick: () => navigate("/admin_edit/1?from=about")
    },
    {
      key: "review",
      label: "每日推进",
      icon: <TagOutlined /> ,
      onClick: () => navigate("/admin/review")
    },
  ]

  return (
    <div className="admin">
      <div className={`slider ${collapsed ? 'close' : 'open'}`}>
        {/* <div className="slider-head">
          <Button type="primary" onClick={() => setCollapsed(!collapsed)} style={{ marginBottom: 16 }}>
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </Button>
        </div> */}
        <Menu
          style={{height:'100%'}}
          items={menuItems}
          mode="inline"
          defaultSelectedKeys={["article"]}
          inlineCollapsed={ collapsed }
        />
      </div>
      <div className="workplace">
        <Outlet/>
      </div>
    </div>
  )
}